<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="styles/vue-page-common.css">
  <script src="Scripts/vue.min.js"></script>
  <script src="StaticFiles/element-ui/element-ui.js"></script>
  <script src="Scripts/axios.min.js"></script>
  <script src="StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="Scripts/axios.config.js"></script>
  <script src="Scripts/crypto-js.js"></script>
  <script src="Scripts/secret.js"></script>
  <title>MES报表登录</title>
  <style>
    html #app,
    body #app {
      width: 100%;
      height: 100%;
    }

    .login-container {
      min-height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .login-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;
    }

    .el-form-item__label {
      font-weight: normal;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-row>
      <el-col :span="12" style="height: calc(100vh);background-color: #353e54;">
        <div>
          <img src="./images/aeec_logo.png" style="height: 60px;" alt="">
          <div style="text-align: center;">
            <img src="images/login-box-bg.svg" style="width: 350px;">
            <div style="font-size: 1.875rem;line-height: 2.25rem;font-size:26px;color:#fff;">欢迎使用MES报表系统</div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="login-container">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-position="left">
            <div style="text-align: center;font-size: 1.5rem;line-height: 2rem;font-weight: 700;">登录</div>
            <el-form-item prop="employeename" label="用户名">
              <el-input v-model="loginForm.employeename" placeholder="请输入员工号" clearable></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input placeholder="请输入密码" v-model="loginForm.password" show-password clearable></el-input>
            </el-form-item>
            <el-button :loading="loading" type="primary" @click="login" style="width:100%;margin:30px 0px;">登录
            </el-button>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>

  <script type="module">
    import { getParams } from './Scripts/hooks/useCommonMethod.js'
    const app = new Vue({
      el: '#app',
      data: {
        loginForm: {
          employeename: '',
          password: ''
        },
        giUserLoginName: '',
        loginRules: {
          employeename: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
          password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
        },
        loading: false
      },
      methods: {
        async login() {
          this.$refs['loginForm'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空');
            } else {
              this.loading = true;
              const { data: res } = await axios.post('handler/report/UserLogin.ashx?action=login', {
                type: 'login',
                employeename: this.loginForm.employeename,
                password: Encrypt(this.loginForm.password)
              })
              this.loading = false;
              if (res.meta.status === 500) {
                return this.$message.error(res.meta.msg)
              }
              if (res.total > 0) {
                const { employeeid, host } = res.data[0];
                const t = Encrypt(new Date());
                const uid = Encrypt(employeeid);
                window.open(`http://${host}/MESReport/index.html?t=${t}&uid=${uid}`, '_self');
              } else {
                this.$message.error('用户名或密码不正确');
              }
            }
          });
        },
        async isUserExists() {
          const { data: res } = await axios.post('handler/report/UserLogin.ashx?action=isUserExists', {
            type: 'isUserExists',
            employeename: this.giUserLoginName
          })
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg)
          }
          if (res.total > 0) {
            const { employeeid, host } = res.data[0];
            const t = Encrypt(new Date());
            const uid = Encrypt(employeeid);
            window.open(`http://${host}/MESReport/index.html?t=${t}&uid=${uid}`, '_self');
          } else {
            this.$message.error('用户不存在');
          }
        }
      },
      mounted() {
        const giUserLoginName = getParams('giUserLoginName');
        if (giUserLoginName) {
          this.giUserLoginName = giUserLoginName;
          this.isUserExists();
        }
      },
      watch: {}
    });
  </script>
</body>

</html>